<script setup>
import { ref ,computed} from 'vue'
import { addPost, editPost } from '@/api/post.js'
import { ElMessage } from 'element-plus'
const props=defineProps({
    showDialog: {
        type: Boolean,
        default:false
    }
})
const emit = defineEmits(["update:showDialog","addSucess"])
const close = () => {
    emit('update:showDialog',false)
}
const formDate = ref({
    name: '',
    status: '',
    notes: '',
    postName: '',
    display: null,
    createTime: '',
})
const rules = ref({
    name:[{required:true,message:'岗位名称不能为空',trigger:'blur'}],
    postName:[{required:true,message:'岗位编码不能为空',trigger:'blur'}],
    display:[{required:true,message:'岗位顺序不能为空',trigger:'blur'}]
})
// 
const formRef = ref()
const getEditAPI =(row) => {
    formDate.value=row
}
const showTitle = computed(() => {
    return formDate.value.id?'修改岗位':'新增岗位'
})
const btnOK = async() => {
  await formRef.value.validate()
    if (formDate.value.id) {
        console.log(formDate.value)
        await editPost(formDate.value) 
        ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success'
        })
    } else {
        await addPost(formDate.value)
        ElMessage({
        showClose: true,
        message: '添加成功',
        type: 'success'
        })   
    }
    formRef.value.resetFields()
    close()
    emit('addSucess')
}
// 向外暴露的方法
defineExpose({
    getEditAPI
})
</script>
<template>
    <el-dialog v-model="props.showDialog" :title="showTitle" @close="close" width="35%" >
      <el-form :model="formDate" :rules="rules" ref="formRef">
         <el-row>
            <el-form-item label="岗位名称" prop="name">
              <el-input v-model="formDate.name">
              </el-input>
          </el-form-item>
          <el-form-item label="岗位编码" prop="postName">
              <el-input v-model="formDate.postName">
              </el-input>
          </el-form-item>
         </el-row>
          <el-form-item label="岗位顺序" prop="display">
              <el-input v-model="formDate.display">
              </el-input>
          </el-form-item>
          <el-radio-group label="状态" v-model="formDate.status">
      <el-radio :label="1">正常</el-radio>
      <el-radio :label="0">停用</el-radio>
      </el-radio-group>
      <el-form-item label="备注" style="margin-top:10px" prop="notes">
              <el-input type="textarea" v-model="formDate.notes">
              </el-input>
          </el-form-item>
         <el-row type="flex" justify="center">
            <el-form-item >
              <el-button @click="close">取消
              </el-button>
              <el-button type="primary" @click="btnOK">确认
              </el-button>
          </el-form-item>
         </el-row>
      </el-form>
    </el-dialog>
  </template>
  <style scoped>
  .el-form-item{
    display:inline-block;
  }
  .el-input{
    margin-right:5px
  }
  </style>